<template>
    <div>
        <h1>Vue的基础语法---vue指令</h1>
        出生地点:<select>
            <option value="">请选择</option>
            <option v-bind:value="item.id" v-for="item in city" :key="item.id">{{ item.name }}</option>
        </select>
        <table>
            <tr>
                <td>ID</td>
                <td>name</td>
                <td>图形</td>
            </tr>
            <tr v-for="item in person" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td> 
                    <img :src="item.img" alt="" width="100" height="100" />
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive} from 'vue'
//v-bind:单向绑定 主要用于绑定标签属性
//将 vue 的基础知识点
let city=ref([
    {id:1,name:'河北'},
    {id:2,name:'河南'},
    {id:3,name:'山西'},
    {id:4,name:'江西'},
    {id:5,name:'陕西'},
    {id:6,name:'湖北'},
])
let person=ref([
{id:1,name:'河北',img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.NXR5AHvkhMFe1_2JTFnoAQHaHa?w=202&h=202&c=7&r=0&o=5&pid=1.7'},
{id:1,name:'江西',img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.NXR5AHvkhMFe1_2JTFnoAQHaHa?w=202&h=202&c=7&r=0&o=5&pid=1.7'},
])
</script>

<style scoped>

</style>